<template>
  <div>
    <div class="upload-wrapper">
      <van-icon ref="fuck" name="photograph" size="30px" color="#dcdee0"></van-icon>
      <input
        ref="file"
        type="file"
        class="upload-input"
        accept="*/*"
        @change="onChoseFile()"
        multiple="multiple"
      />
    </div>
  </div>
</template>

<script>
export default {
  name: 'Upload',
  data () {
    return {
      fileList: []
    }
  },
  methods: {
    onChoseFile () {
      console.log('fuck!!!!!!!!!!')
      console.log(this.$refs)
      console.log('=======', this.$refs.file.files)
    }
  },
  activated () {
  }
}
</script>

<style scoped>
.upload-wrapper{
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 60px;
  height: 60px;
  background-color: #f7f8fa;
  border-radius: 10px;
}
.upload-input{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  cursor: pointer;
  opacity: 0;
}
</style>
